<template>
  <div>
    <el-button type="primary" @click="submitTop">新增</el-button>
    <hr />
    <el-row :gutter="40">
      <el-col :span="12">
        <el-tree
          :data="data"
          :props="defaultProps"
          @node-click="handleNodeClick"
        >
          <span style="width: 100%" slot-scope="{ data, node }">
            <span>{{ data.name }}</span>
            <span
              @click="toDelete(data.id)"
              v-if="!node.childNodes.length"
              style="float: right"
              ><i class="el-icon-delete"></i
            ></span>
            <span @click="toEdit(data)" style="float: right;"
              ><i class="el-icon-edit"></i
            ></span>
            <span
              v-if="data.level !== 3"
              @click="toAdd(data)"
              style="float: right;"
            >
              <i class="el-icon-plus"></i>
            </span>
          </span>
        </el-tree>
      </el-col>
      <el-col :span="12">
        <el-form
          label-position="left"
          label-width="100px"
          :model="postData"
          :rules="postRules"
          ref="postForm"
        >
          <el-row>
            <el-form-item v-show="this.postData.parentId" label="上级地区">
              <el-input readonly v-model="parentName" />
            </el-form-item>
          </el-row>
          <el-row>
            <el-form-item v-show="this.flag" label="地区名字" prop="name">
              <el-input v-model="postData.name" />
            </el-form-item>
          </el-row>
        </el-form>
        <el-button v-if="flag === 'add'" @click="submit">新增</el-button>
        <el-button v-if="flag === 'edit'" @click="edit">修改</el-button>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import axios from "axios";
import transform from "../../../utils/transform";
export default {
  name: "areaManage",
  data() {
    return {
      data: [],
      defaultProps: {
        children: "children",
        label: "name"
      },
      postData: {
        name: "",
        parentId: "",
        level: ""
      },
      postRules: {
        name: [{ required: true, message: "请输入地区名字", trigger: "blur" }]
      },
      parentName: "",
      activeId: "",
      editId: "",
      flag: ""
    };
  },
  methods: {
    handleNodeClick(data) {
      this.activeId = data.id;
    },
    submit() {
      this.$refs.postForm.validate(async valid => {
        if (valid) {
          const {
            data: { errno, message }
          } = await axios.post("/api/area/area", transform(this.postData));
          if (!errno) {
            this.$message({ type: "success", message: "添加成功" });
            this.initData();
          } else {
            this.$message({ type: "error", message });
          }
          this.postData.name = "";
        }
      });
    },
    async initData() {
      const {
        data: { errno, message, data }
      } = await axios.get("/api/area/area");
      if (!errno) {
        this.data = data;
      } else {
        this.$message({ type: "error", message });
      }
    },
    submitTop() {
      this.flag = "add";
      this.parentName = "";
      this.postData.name = "";
      this.postData.parentId = "";
      this.postData.level = "";
    },
    toDelete(id) {
      this.$confirm("你确认要删除此地区?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(async () => {
        const {
          data: { errno, message }
        } = await axios.delete("/api/area/area/" + id);
        if (!errno) {
          this.$message({ type: "success", message: "删除成功" });
          this.initData();
        } else {
          this.$message({ type: "error", message });
        }
      });
    },
    async edit() {
      const {
        data: { errno, message }
      } = await axios.patch(
        "/api/area/area",
        transform({ ...this.postData, id: this.activeId })
      );
      if (!errno) {
        this.$message({ type: "success", message: "修改成功" });
        this.initData();
      } else {
        this.$message({ type: "error", message });
      }
    },
    toEdit(data) {
      this.flag = "edit";
      this.activeId = data.id;
      this.postData.name = data.name;
      this.parentName = "";
      this.postData.parentId = "";
      this.postData.level = "";
    },
    toAdd(data) {
      this.flag = "add";
      this.postData.name = "";
      this.parentName = data.name;
      this.postData.parentId = data.id;
      this.postData.level = +data.level + 1;
    }
  },
  mounted() {
    this.initData();
  }
};
</script>

<style lang="scss" scoped>
.tree-container {
  display: flex;
  > div {
    flex: 1;
  }
}
</style>
